import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { List, Spin } from 'antd';
import { categoryAPI, productAPI } from '../../services/api';
import './Category.css';

const MobileCategory = () => {
  const navigate = useNavigate();
  const [categories, setCategories] = useState([]);
  const [products, setProducts] = useState([]);
  const [selectedCategory, setSelectedCategory] = useState(null);
  const [loading, setLoading] = useState(false);

  // 获取分类数据
  useEffect(() => {
    const fetchCategories = async () => {
      try {
        const response = await categoryAPI.getCategories();
        if (response.success) {
          setCategories(response.data);
          if (response.data.length > 0) {
            setSelectedCategory(response.data[0].id);
          }
        }
      } catch (error) {
        console.error('获取分类失败:', error);
      }
    };

    fetchCategories();
  }, []);

  // 获取分类商品
  useEffect(() => {
    if (selectedCategory) {
      fetchCategoryProducts(selectedCategory);
    }
  }, [selectedCategory]);

  const fetchCategoryProducts = async (categoryId) => {
    setLoading(true);
    try {
      const response = await productAPI.getProducts({ 
        categoryId,
        includeInactive: false // 前台只显示上架商品
      });
      if (response.success) {
        setProducts(response.data.list);
      }
    } catch (error) {
      console.error('获取商品失败:', error);
    } finally {
      setLoading(false);
    }
  };

  const handleProductClick = (product) => {
    navigate(`/app/product/${product.id}`);
  };

  return (
    <div className="category-page">
      {/* 左侧分类列表 */}
      <div className="category-sidebar">
        <div className="category-list">
          {categories.map(category => (
            <div
              key={category.id}
              onClick={() => setSelectedCategory(category.id)}
              className={`category-sidebar-item ${selectedCategory === category.id ? 'active' : ''}`}
            >
              <div className="category-sidebar-icon">{category.icon}</div>
              <div className="category-sidebar-name">{category.name}</div>
            </div>
          ))}
        </div>
      </div>

      {/* 右侧商品列表 */}
      <div className="category-content">
        {loading ? (
          <div className="category-loading">
            <Spin size="large" />
          </div>
        ) : (
          <div className="category-products-grid">
            {products.map(product => (
              <div
                key={product.id}
                className="category-product-card"
                onClick={() => handleProductClick(product)}
              >
                <img 
                  src={product.images[0]} 
                  alt={product.name}
                  className="category-product-image"
                />
                <div className="category-product-info">
                  <div className="category-product-name">{product.name}</div>
                  <div className="category-product-price">¥{product.price}</div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
};

export default MobileCategory; 